<template>
  <div class="container">
    <div class="newMsg" v-if="newShow">
      <textarea name="" id="" placeholder="君过留言，墨韵长传" v-model="params.msgContent"></textarea>
      <button class="submit" @click="postMsg">发布留言</button>
    </div>
    <div class="board">
      <div class="tag" v-for="(item, index) in guestList" :key="item.msgId">
        <div class="delete">×</div>
        <div class="tag-content">{{ item.content }}</div>
        <div class="tag-info">
          <div class="tag-time">{{ formatDate(item.msgTime) }}</div>
          <div class="tag-writer">-- {{ item.nickname }}</div>
        </div>
      </div>
      <div class="none" v-if="!guestList.length">-暂无留言-</div>
    </div>
    <popAlert v-show="popShow">
      <template #body>
        留言发布成功!
      </template>
      <template #footer>
        <button class="confirm" @click="popShow = false; getGuestList()">确定</button>
      </template>
    </popAlert>
  </div>
</template>

<script setup>
import { reqAddGuestBook, reqGetGuestBook } from '@/apis/guestBook';
import userStore from '@/stores/modules/user';
import { ref, onMounted } from 'vue'
import popAlert from '@/components/popAlert.vue'
import { useRoute } from 'vue-router';
let guestList = ref([])
let popShow = ref(false)
let newShow = ref(false)
let params = ref({
  userId: userStore().userId,
  toId: useRoute().params.id,
  msgContent: '',
})
onMounted(() => {
  const route = useRoute()
  if (route.path.startsWith('/otherHome')) {
    newShow.value = true
  } else {
  }
  getGuestList()
})
const route = useRoute()
const getGuestList = async () => {
  if (route.path.startsWith('/otherHome')) {
    const res = await reqGetGuestBook(route.params.id)
    if (res.code === 200) {
      guestList.value = res.data
    }
  } else {
    const res = await reqGetGuestBook(userStore().userId)
    if (res.code === 200) {
      guestList.value = res.data
    }
  }
}

// 格式化时间
const formatDate = (date) => {
  return (date.slice(0, 10).split('-').join('/') + ' ' + date.slice(11, 16))
}

const postMsg = async () => {
  const res = await reqAddGuestBook(params.value)
  if (res.code === 200) {
    popShow.value = true
    params.value.msgContent = ''
  }
}

</script>

<style lang="scss" scoped>
.container {
  width: 90%;
  margin: auto;

  .newMsg {
    width: 100%;
    display: flex;
    justify-content: space-around;

    textarea {
      font-size: .2333rem;
      width: 80%;
      height: .8rem;
      resize: none;
      padding: .2rem;
      border-radius: .15rem;
      border: #bbb solid .01rem;

      //滚动条样式
      &::-webkit-scrollbar {
        width: 0.1rem;
        height: 0.1rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 0.1rem;
      }

      &::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        border-radius: 0.1rem;
      }

      &::placeholder {
        color: #ccc;
      }
    }

    .submit {
      border: none;
      font-size: .2667rem;
      width: 15%;
      background-color: #47A170;
      color: white;
      padding: .1rem;
      cursor: pointer;
    }
  }

  .board {
    background-color: #B29170;
    border: .3rem solid #655021;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .1667rem;

    .tag {
      width: 80%;
      padding: .1667rem;
      background-color: #d9cbac;
      margin: .1667rem;
      box-shadow: .0333rem .0333rem .0333rem #655021;
      font-size: .28rem;
    }

    .delete {
      color: #655021;
      float: right;
      cursor: pointer;
      background-color: #fff;
      box-shadow: .0333rem .0333rem .0333rem #655021;
      padding: .03rem;
      font-weight: bold;
    }

    .tag-info {
      margin: .0833rem;
      display: flex;
      justify-content: space-between;
      font-size: .25rem;
    }

    .none {
      padding: 1rem;
      font-size: .5rem;
    }

    ;
  }
}

.confirm {
  border: none;
  background-color: #BFBFB4;
  box-shadow: .0167rem .0167rem .0333rem #333;
  color: #fff;
  border-radius: .1rem;
  cursor: pointer;
}
</style>